<template>
  <div class="wrapper">
    <div class="title">我的订单</div>
    <div class="orders">
      <template  v-for="outItem in carData.shopInfo" :key="outItem.shopId">
        <div class="order" v-if="outItem.total">
        <div class="order_title">
          <div class="product_header_all">
            <span
              class="product_header_icon iconfont"
              v-html="outItem.shopChecked ? '&#xe730;' : '&#xe72f;'"
              @click="setAllChecked(outItem.shopId)"
            ></span>
            {{ outItem.shopName }}
          </div>
        </div>
        <div class="order_content">
          <div class="product">
            <template v-for="item in outItem.productList" :key="item._id">
              <div class="product_item" v-if="item.count > 0">
                <div
                  class="product_item_checked iconfont"
                  v-html="item.check ? '&#xe730;' : '&#xe72f;'"
                  @click="changeChecked(outItem.shopId, item._id)"
                ></div>
                <img class="product_item_img" :src="item.imgUrl" />
                <div class="product_item_detail">
                  <h4 class="product_item_title">{{ item.name }}</h4>
                  <p class="product_item_price">
                    <span class="product_item_yen">&yen;</span>{{ item.price }}
                    <span class="product_item_origin"
                      >&yen;{{ item.oldPrice }}</span
                    >
                  </p>
                </div>
                <div class="product_number">
                  <span
                    class="product_number_minus"
                    @click="
                      addItem(
                        outItem.shopId,
                        item._id,
                        item,
                        -1,
                        outItem.shopName
                      )
                    "
                    >-</span
                  >
                  {{
                    cartList?.[outItem.shopId]?.productList?.[item._id]
                      ?.count || 0
                  }}
                  <span
                    class="product_number_plus"
                    @click="
                      addItem(
                        outItem.shopId,
                        item._id,
                        item,
                        1,
                        outItem.shopName
                      )
                    "
                    >+</span
                  >
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      </template>
      
    </div>
  </div>
  <div class="check">
    <div class="check_icon">
      <div class="product_header_all">
        <span
          class="product_header_icon iconfont"
          v-html="carData.allChecked ? '&#xe730;' : '&#xe72f;'"
          @click="setCartAllChecked"
        ></span>
        全选
      </div>
    </div>
       <div class="check_info" >
      总计: <span class="check_info_price">{{ carData.price }}</span>
      </div>
      <div class="check_btn" @click="toOrder">
        去结算
      </div>
  </div>
  <Docker :currentIndex="1"></Docker>
  <Toast v-if="data.showToast" :message='data.toastMessage' />
</template>

<script>
import Docker from "../../components/Docker.vue";
import { reactive } from "vue";
import Toast from '../../components/Toast.vue'
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { computed, ref } from "vue";
//第一种获取target值的方式，通过vue中的响应式对象可使用toRaw()方法获取原始对象
import { toRaw } from "@vue/reactivity";
export default {
  name: "CartList",
  components: { Docker,Toast },
  setup() {
    const store = useStore();
    const router = useRouter();
    const cartList = store.state.cartList;
    const data = reactive({
				showToast: false,
				toastMessage: ''
			})
    // 定义一个计算属性，用于存放购物车里所有相关数据
    const carData = computed(() => {
      const shopInfo = cartList;
      // 定义一个变量，用于存放全选按钮的状态
      let allChecked = true;
      // 定义一个变量，用于存放总价
      let price = 0;
      for (let e in cartList) {
        let shopChecked = true;
        let total=0
        // 首先拿到当前这个店铺的所有商品信息
        let productList = cartList[e]?.productList;
        for (let i in productList) {
          const product = productList[i];
          total+=product.count

          // 做一个判断，如果有某一个产品为未选中状态，那就让全选的状态为
          if (!product.check) {
            allChecked = false;
            shopChecked = false;
          }
          if (product.check) {
            price += product.count * product.price;
          }
        }
        shopInfo[e].shopChecked = shopChecked;
        shopInfo[e].total = total;
      }
      return { allChecked, price: price.toFixed(2),shopInfo };
    });

    // 店铺全选
    const setAllChecked = (shopId) => {
      let cc = !carData.value.shopInfo[shopId].shopChecked;
      store.commit("setAllChecked", { shopId, cc });
    };

    // 购物车全选
    // 计算属性返回的是ref属性，访问的时候应该加上value
    const setCartAllChecked = () => {
      let cc = !carData.value.allChecked;
      store.commit("setCartAllChecked", { cc });
    };
    const addItem = (shopId, productId, productInfo, num, shopName) => {
      store.commit("addItem", {
        shopId,
        productId,
        productInfo,
        num,
        shopName,
      });
    };
    const changeChecked = (shopId, productId) => {
      store.commit("changeChecked", { shopId, productId });
    };
    const toOrder = () => {
      if(carData.value.price > 0){
          // router.push({path: '/OrderConfirmation/:'+shopId})
          
      }else{
            data.showToast = true
						data.toastMessage = '请添加商品后再点击'
            setTimeout(() => {
              data.showToast = false
							data.toastMessage = ''
            }, 2000)
      }
    }
    return {
      cartList,
      addItem,
      changeChecked,
      setCartAllChecked,
      setAllChecked,
      carData,
      data,
      toOrder
    };
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 1rem;
  right: 0;
  background: rgb(248, 248, 248);
  padding: 0;
}
.title {
  line-height: 0.44rem;
  background: #fff;
  font-size: 0.16rem;
  color: #333;
  text-align: center;
}
.order {
  margin: 0.16rem;
  padding: 0.16rem;
  background: #fff;
  &_title {
    margin-bottom: 0.16rem;
    line-height: 0.22rem;
    font-size: 0.16rem;
    color: #333;
  }
  &_status {
    float: right;
    font-size: 0.14rem;
    color: #999;
  }
  &_content {
    display: flex;
    &_imgs {
      flex: 1;
    }
    &_img {
      width: 0.4rem;
      height: 0.4rem;
      margin-right: 0.12rem;
    }
    &_info {
      width: 0.7rem;
    }
    &_price {
      margin-bottom: 0.04rem;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: #e93b3b;
      text-align: right;
    }
    &_count {
      line-height: 0.14rem;
      font-size: 0.12rem;
      color: #333;
      text-align: right;
    }
  }
}

// 00000000000

.cart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  z-index: 2;
  background: #fff;
}
.product {
  overflow-y: scroll;
  flex: 1;
  background: #ffffff;
  &_header {
    display: flex;
    line-height: 0.52rem;
    border-bottom: 1px solid #f1f1f1;
    font-size: 0.14rem;
    color: #333;
    &_all {
      width: 1.64rem;
      margin-left: 0.18rem;
    }
    &_icon {
      display: inline-block;
      margin-right: 0.1rem;
      vertical-align: top;
      color: #0091ff;
      font-size: 0.2rem;
    }
    &_clear {
      flex: 1;
      margin-right: 0.16rem;
      text-align: right;
      &_btn {
        display: inline-block;
      }
    }
  }
  &_item {
    position: relative;
    display: flex;
    padding: 0.12rem 0;
    margin: 0 0.16rem;
    border-bottom: 0.01rem solid #f1f1f1;
    &_checked {
      line-height: 0.5rem;
      margin-right: 0.2rem;
      color: #0091ff;
      font-size: 0.2rem;
    }
    &_img {
      width: 0.46rem;
      height: 0.46rem;
      margin-right: 0.16rem;
    }
    &_title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: #333;
    }
    &_price {
      margin: 0.06rem 0 0 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: #e93b3b;
    }
    &_yen {
      font-size: 0.12rem;
    }
    &_origin {
      margin-left: 0.06rem;
      line-height: 0.2rem;
      font-size: 0.12rem;
      color: #999;
      text-decoration: line-through;
    }
  }
  .product_number {
    position: absolute;
    right: 0;
    bottom: 0.12rem;
    &_minus,
    &_plus {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      line-height: 0.16rem;
      border-radius: 50%;
      font-size: 0.2rem;
      text-align: center;
    }
    &_minus {
      border: 0.01rem solid #666;
      color: #666;
      margin-right: 0.05rem;
    }
    &_plus {
      background: #0091ff;
      color: #fff;
      margin-left: 0.05rem;
    }
  }
}
.check {
  position: fixed;
  bottom: 6%;
  display: flex;
  height: 0.49rem;
  width: 100%;
  border-top: 0.01rem solid #f1f1f1;
  line-height: 0.49rem;
  &_icon {
    position: relative;
    width: 0.84rem;
    &_img {
      display: block;
      margin: 0.12rem auto;
      width: 0.28rem;
      height: 0.26rem;
    }
    &_tag {
      position: absolute;
      right: 0.2rem;
      top: 0.04rem;
      width: 0.2rem;
      height: 0.2rem;
      line-height: 0.2rem;
      background-color: #e93b3b;
      border-radius: 50%;
      font-size: 0.12rem;
      text-align: center;
      color: #fff;
      transform: scale(0.5);
    }
  }
  &_info {
    flex: 1;
    color: #333;
    font-size: 0.12rem;
    text-align: right;
    &_price {
      line-height: 0.49rem;
      color: #e93b3b;
      font-size: 0.18rem;
    }
  }
  &_btn {
    width: 0.98rem;
    background-color: #4fb0f9;
    text-align: center;
    color: #fff;
    font-size: 0.14rem;
    a {
      color: #fff;
      text-decoration: none;
    }
  }
}
</style>